<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <!-- Import style -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <!-- Import Vue 3 -->
    <script src="../js/vue.js"></script>
    <!-- Import component library -->
    <script src="//unpkg.com/element-plus"></script>
    <link rel="stylesheet" href="../css/login.css">
    <script type="module" src="../js/login.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <div class="el-card login-form-layout" v-bind:class="{ shadow: !isSadow  }">
                <div class="el-card__body">
                    <form class="el-form el-form--label-left" autocomplete="on">
                        <div style="text-align: center;">
                            <svg aria-hidden="true" class="svg-icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="7986"
                                xmlns:xlink="http://www.w3.org/1999/xlink"
                                style="width: 56px; height: 56px; color: rgb(64, 158, 255);">
                                <path
                                    d="M825.6 554.666667c-64 0-121.6-38.4-155.733333-89.6C633.6 516.266667 576 554.666667 512 554.666667s-121.6-38.4-155.733333-89.6C320 516.266667 264.533333 554.666667 198.4 554.666667 89.6 554.666667 0 465.066667 0 356.266667v-8.533334L151.466667 0h721.066666L1024 345.6v8.533333c0 110.933333-89.6 200.533333-198.4 200.533334z m-200.533333-219.733334h85.333333c0 61.866667 51.2 134.4 113.066667 134.4 59.733333 0 108.8-46.933333 113.066666-104.533333L817.066667 85.333333H206.933333L85.333333 364.8c4.266667 57.6 53.333333 104.533333 113.066667 104.533333 64 0 113.066667-74.666667 113.066667-134.4h85.333333c0 61.866667 51.2 134.4 113.066667 134.4 66.133333 0 115.2-74.666667 115.2-134.4zM810.666667 1021.866667H213.333333c-83.2 0-149.333333-64-149.333333-142.933334V595.2h85.333333v283.733333c0 32 27.733333 57.6 64 57.6h597.333334c34.133333 0 64-25.6 64-57.6V595.2h85.333333v283.733333c0 78.933333-66.133333 142.933333-149.333333 142.933334z"
                                    p-id="2044"></path>
                            </svg>
                        </div>
                        <h2 class="login-title color-main">Pet Store Server</h2>
                        <div class="el-form-item is-required">
                            <div class="el-form-item__content">
                                <div class="el-input el-input--prefix el-input--suffix">
                                    <input type="text" autocomplete="on" name="username" placeholder="请输入用户名"
                                        class="input__inner">
                                    <span class="input__prefix">
                                        <span class="form-item__content">
                                            <svg aria-hidden="true" class="color-main svg-icon" viewBox="0 0 1024 1024"
                                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7986"
                                                xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
                                                <path
                                                    d="M504.951 511.98c93.49 0 169.28-74.002 169.28-165.26 0-91.276-75.79-165.248-169.28-165.248-93.486 0-169.287 73.972-169.279 165.248-0.001 91.258 75.793 165.26 169.28 165.26z m77.6 55.098H441.466c-120.767 0-218.678 95.564-218.678 213.45V794.3c0 48.183 97.911 48.229 218.678 48.229H582.55c120.754 0 218.66-1.78 218.66-48.229v-13.77c0-117.887-97.898-213.45-218.66-213.45z"
                                                    p-id="7987"></path>
                                            </svg>
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="el-form-item is-required">
                            <div class="el-form-item__content">
                                <div class="el-input el-input--prefix el-input--suffix">
                                    <input type="password" autocomplete="on" name="password" placeholder="请输入密码"
                                        class="input__inner">
                                    <span class="input__prefix">
                                        <span class="form-item__content">
                                            <svg aria-hidden="true" class="color-main svg-icon" viewBox="0 0 1024 1024"
                                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7986"
                                                xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
                                                <path
                                                    d="M780.8 354.579692 665.6 354.579692 665.6 311.689846c0-72.310154-19.849846-193.299692-153.6-193.299692-138.870154 0-153.6 135.049846-153.6 193.299692l0 42.889846L243.2 354.579692 243.2 311.689846C243.2 122.249846 348.790154 0 512 0s268.8 122.249846 268.8 311.689846L780.8 354.579692zM588.8 669.420308C588.8 625.900308 554.220308 590.769231 512 590.769231s-76.8 35.131077-76.8 78.651077c0 29.459692 15.399385 54.468923 38.439385 67.820308l0 89.639385c0 21.740308 17.250462 39.699692 38.4 39.699692s38.4-17.959385 38.4-39.699692l0-89.639385C573.44 723.889231 588.8 698.88 588.8 669.420308zM896 512l0 393.609846c0 65.260308-51.869538 118.390154-115.2 118.390154L243.2 1024c-63.291077 0-115.2-53.129846-115.2-118.390154L128 512c0-65.220923 51.869538-118.390154 115.2-118.390154l537.6 0C844.130462 393.609846 896 446.779077 896 512z"
                                                    p-id="9230"></path>
                                            </svg>
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="el-form-item" style="margin-bottom: 60px; text-align: center;">
                            <div class="form-item__content" style=" width: 100%;">
                                <button type="button" class="el-button el-button--primary"
                                    style="width: 45%;height: 100%;">
                                    <span>
                                        登录
                                    </span>
                                </button>
                                <button type="button" class="el-button el-button--primary"
                                    style="width: 45%;height: 100%;">
                                    <span>
                                        获取体验账号
                                    </span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <img src="/src/main/resources/images/login_center_bg.png" class="login-center-layout">
            <div class="el-dialog__wrapper" style="z-index: 2001;">
                <div class="el-dialog el-dialog--center" style="width: 30%; margin-top: 15vh;">
                    <div class="el-dialog__header"><span class="el-dialog__title">公众号二维码</span></div>
                    <div class="el-dialog__body">
                        <div style="text-align: center;"><span class="font-title-large"><span
                                    class="color-main font-extra-large">关注公众号</span>回复<span
                                    class="color-main font-extra-large">体验</span>获取体验账号</span> <br>
                            <img src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/banner/qrcode_for_macrozheng_258.jpg"
                                width="160" height="160" style="margin-top: 10px;">
                        </div>
                    </div>
                    <div class="el-dialog__footer"><span class="dialog-footer"><button type="button"
                                class="el-button el-button--primary"><span>确定</span></button></span></div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>